//1.引入模块gulp核心工具
const gulp=require("gulp");

//1.1 引入浏览器热更新模块(浏览器同步更新工具，就是代码一保存，网页也自动更新)
const browserSync=require("browser-sync").create();

//1.2 引入sass模块
const sass=require("gulp-sass");

//1.3 引入美化css模块
const autoprefixer=require("gulp-autoprefixer");

//1.4 引入压缩CSS模块
const cleancss=require("gulp-clean-css")

//1.5 JS降级为ES5
const babel=require("gulp-babel")

//2.自定义的任务
//gulp.task("任务名",callback)
//gulp.src("源文件目录")		从源文件目录引入文件
//.pipe()					表示下一步要执行的函数
//gulp.dest("去向文件目录")		将文件输出到去向文件目录
gulp.task("test",function(){
	console.log("test gulp");
	gulp.src("./src/index.html")
	.pipe(gulp.dest("./dist/"))
})

//2.2浏览器热更新任务
gulp.task("bs",function(){
	//初始化browserSync
	browserSync.init({
		server:{	//服务
			baseDir:"./"	//默认打开地址，一般为根目录
		},
		port:3001	//端口号
	})
	//添加html监听，自动刷新页面
	gulp.watch("./src/**/*.html").on("change",browserSync.reload);
	gulp.watch("./*.html").on("change",browserSync.reload);
	//添加css监听，自动刷新页面
	gulp.watch("./src/**/*.css").on("change",browserSync.reload);
	//添加js监听，自动刷新页面
	gulp.watch("./src/**/*.js").on("change",browserSync.reload);
	//添加sass监听，自动刷新页面
	gulp.watch("./src/**/*.scss",["sass"]).on("change",browserSync.reload);//["任务名"]代表执行某个任务
})

//2.3sass任务
gulp.task("sass",function(){
	 gulp.src("./src/sass/**/*.scss")
	.pipe(sass())
	.pipe(autoprefixer({
		browsers:["last 2 versions","Android >= 4.0","ios 7","last 3 Safari versions"],	//版本配置
		cascade:true	
	}))
	.pipe(gulp.dest("./src/css/"))
})

//2.4压缩css任务
gulp.task("cleancss",function(){
	gulp.src("./src/**/*.css")
	.pipe(cleancss({
		//是否开启高级优化(合并选择器等)，默认true
		advanced:false,
		//保留ie7以上兼容写法： 默认*["ie7"代表兼容IE7及以上，"ie8"代表兼容IE8及以上，"ie9"代表兼容IE9及以上，"*"代表兼容IE10及以上]
		compatibility:"ie7",
		//是否保留换行，默认false
		keepBreaks:true,
		//是否保留所有前缀，如果有用autoprefixer生成的浏览器的前缀的话，最好要加，不然前缀会被删除
		keepSpecialComments:"*"
	}))
	.pipe(gulp.dest("./dist/css/"))
})

//2.5JS降级任务
gulp.task("babelJs",function(){
	gulp.src("./src/js/*.js")
	.pipe(babel())
	.pipe(gulp.dest("./dist/js/"))
})

//3.在命令行中输入gulp 任务名执行